
<script setup lang="ts">
	import {ref,reactive,getCurrentInstance} from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app';
	
	const userStoreInfo = userStore();
	import {userStore} from '@/pinia';
	let vipObj = reactive(
		{	
			state:0,
			vipOpenId:"1",
			headDetail:[],
			mainDetail:[],
			buyObj:{}
		}
	)
	const change = (idx) => {
		vipObj.buyObj = vipObj.mainDetail[idx]
		vipObj.state = idx
		console.log(vipObj.state)
	}
	const {proxy} = getCurrentInstance()
	const getList = ()=>{
		let type = '1'
		if(userStoreInfo.userFlag == 0){
			type = '0'
		}
		proxy.$req('GET', proxy.$api.meiyeRecruitVipCard3List,{type}).then((res) => {
			console.log(res);
			if(res.code === 200){
				vipObj.mainDetail = res.result.records
				vipObj.buyObj = vipObj.mainDetail[0]

			}
		})
	}
	let payUrl = ref('')
	let tradeNo = ref('')
	let payId = ref('')
	let timeId = ref('')
	const payLKL = () => {
		// #ifdef APP-PLUS
		plus.runtime.openURL(payUrl.value)
		console.log('app')
		// #endif
		// #ifdef H5
		window.open(payUrl.value)
		console.log('h5')
		// #endif 
		// timeId.value = setInterval(() => {
		// isPaySuccess(timeId.value)
		// }, 2000)
	}
	onShow(() => {
		if (tradeNo.value != '' && payId.value != '') {
			isPaySuccess()
		}
	})
	const isPaySuccess = () => {
		proxy.$req('POST', proxy.$api.ShoppingStoreOrder, {
			tradeNo: tradeNo.value,
			payId: payId.value
		}).then((res) => {
			if (res.code != 200 || res.result == null) {
				console.log("出错了")
				uni.$u.toast(res.message)
				return
			}
			let a = JSON.parse(JSON.stringify(res)).result
			let data = JSON.parse(a).resp_data
			if (data.order_status == 0) {
				uni.$u.toast('待支付')
			} else if (data.order_status == 1) {
				uni.$u.toast('支付中')
			} else if (data.order_status == 2) {
				uni.$u.toast('支付成功')
				setTimeout(() => {
					uni.navigateBack({
						delta: 2
					});
				}, 1000)
			} else if (data.order_status == 3) {
				uni.$u.toast('支付失败')
			} else if (data.order_status == 4) {
				uni.$u.toast('订单已过期')
			} else if (data.order_status == 5) {
				uni.$u.toast('订单已取消')
			} else if (data.order_status == 6) {
				uni.$u.toast('部分退款或者全部退款')
			}
		})
	}
	const submitOrder = () => {
		proxy.$req('POST', proxy.$api.meiyeRecruitHunterInfo2Pay, {
			vipId:vipObj.buyObj.id
			// memberId: userStoreInfo.userInfo.id,
			// vipCardSettingId: vipOpenId.value
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				let data = JSON.parse(res.result.result)
				payUrl.value = data.resp_data.counter_url
				tradeNo.value = data.resp_data.out_order_no
				payId.value = data.resp_data.pay_order_no
				payLKL()
				// let url = JSON.parse(res.result.result).resp_data.counter_url
				// // #ifdef APP-PLUS
				// plus.runtime.openURL(url)
				// console.log('app');
				// // #endif
				// // #ifdef H5
				// window.open(url)
				// console.log('h5');
				// // #endif
				//支付成功或者失败的回调缺少
			}
		})
	}
	onLoad(()=>{
		getList()
	})
</script>

<template>
	<view class="topBox">
			<u-navbar class="navbar"  bgColor="rgba(255, 255, 255, 0)" :placeholder="false" title="" :autoBack="true">
				<template #left>
					<view> <u-icon name="arrow-left"  size="17px"></u-icon> </view>
				</template>
				<template #center>
					<view>升级VIP 求职快3倍</view>
				</template>
			</u-navbar>
			<view class="juxing">
				<view class="desc">更多曝光，更多关注</view>
				<view class="desc">一键设置，操作简单</view>
				<!-- <view class="juxingModal" style="margin-bottom: 20rpx;">
					<view class="oneLine">
						<view class="juxingTitle">简历3倍曝光</view>
						<view class="line"><u-line-progress :percentage="100" height="18rpx" :showText="false" activeColor="#CB645E"></u-line-progress></view>
						<view class="num">59.4次/日</view>
					</view>
					<view class="twoLine">
						<view class="juxingTitle tilte2">优先被看到</view>
						<view class="line2"><u-line-progress :percentage="100" height="18rpx" :showText="false" activeColor="#F6C6A7"></u-line-progress></view>
						<view class="num">59.4次/日</view>
					</view>
				</view>
				<view class="juxingModal">
					<view class="oneLine">
						<view class="juxingTitle">简历3倍曝光</view>
						<view class="line"><u-line-progress :percentage="100" height="18rpx" :showText="false" activeColor="#CB645E"></u-line-progress></view>
						<view class="num">59.4次/日</view>
					</view>
					<view class="twoLine">
						<view class="juxingTitle tilte2">优先被看到</view>
						<view class="line2"><u-line-progress :percentage="100" height="18rpx" :showText="false" activeColor="#F6C6A7"></u-line-progress></view>
						<view class="num">59.4次/日</view>
					</view>
				</view> -->
			</view>
			<view class="main">
				<view class="mainHead">
					<view class="mainHeadLeft">
						现在开通加速找工作
					</view>
					<view class="mainHeadRight">
						累计有1129.20人购买
					</view>
				</view>
				<view class="mainCenter">
					<view class="centerModal" :class="{'ismainCenter': vipObj.state == index}" @click="change(index)" v-for="(item,index) in vipObj.mainDetail" :key="index">
						<view class="cenH">
							{{item.cardName}}
						</view>
						<view class="cenC">
							<text>￥</text><text class="fontSize intFont" :class="{'isfontSize': vipObj.state == index}">{{item.money}}</text>
						</view>
						<view class="cenF">
							{{item.cardDescription}}
						</view>
					</view>
				</view>
				<view class="mainFoot">
					<view class="footModal1">
						<view class="foottext1">
							专属特权
						</view>
						<view class="foottext2">
							普通用户
						</view>
						<view class="foottext3">
							VIP用户
						</view>
					</view>
					<view class="footModal2">
						<view class="foottext4" style="font-size: 30rpx;">
							简历置顶
						</view>
						<view class="foottext5">
							{{vipObj.buyObj.positionTopOrdinaryUserDay || 0}}元/天
						</view>
						<view class="foottext6" style="font-size: 28rpx;" >
							赠送{{vipObj.buyObj.positionTopVipUserDay || 0}}天
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<view class="footMain">
					<view class="footLeft">
						<view>
							<text class="footTitle">月卡</text><text style="color: red;">￥</text><text class="footnum intFont">{{vipObj.buyObj.money}}</text>
						</view>
						<view class="footDay">
							{{Math.floor(vipObj.buyObj.money/vipObj.buyObj.days * 100) / 100}}元/天
						</view>
					</view>
					<view class="footRight" @click="submitOrder">
						立即开通
					</view>
				</view>
			
			</view>
	</view>
</template>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	.foot{
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0,0,0,0.05);
		position: fixed;
		bottom: 0;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		.footMain{
			display: flex;
			justify-content: space-between;
			.footnum{
				font-size: 56rpx;
				font-weight: bold;
				color: #F22F19;
			}
			.footTitle{
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
			.footDay{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
			.footRight{
				margin-top: 12rpx;
				width: 440rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #FFFFFF;
				background: linear-gradient(137deg, #8F3D47 0%, #CA5F74 100%);
				border-radius: 16rpx;
			}
		}
	}
	.mainFoot{
		width: 686rpx;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(0,0,0,0.05);
		margin-top: 30rpx;
		.footModal2{
			width: 686rpx;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			.foottext4{
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
			}
			.foottext5{
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
			.foottext6{
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.85);
				line-height: 34rpx;
				background: linear-gradient(108deg, #6B282B 0%, #DD6B83 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.footModal1{
			width: 686rpx;
			height: 78rpx;
			background: rgba(0,0,0,0.03);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			.foottext1{
				font-size: 24rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.85);
			}
			.foottext2{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
			}
			.foottext3{
				font-size: 24rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.85);
				line-height: 34rpx;
				background: linear-gradient(108deg, #6B282B 0%, #DD6B83 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	.main{
		width: 750rpx;
		border-radius:20rpx 20rpx 0 0 ;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		padding:32rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.mainHead{
			display: flex;
			justify-content: space-between;
			.mainHeadLeft{
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.85);
			}
			.mainHeadRight{
				background: rgba(0,0,0,0.05);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.65);
				padding: 10rpx;
			}
		}
		.mainCenter{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.centerModal{
				width: 206rpx;
				height: 256rpx;
				background: linear-gradient(134deg, #FFF7ED 0%, #f3e6de 100%);
				padding: 40rpx 20rpx 10rpx 20rpx;
				box-sizing: border-box;
				text-align: center;
				border-radius: 16rpx;
				border: 5rpx solid rgba(200,200,200,0);;
				.cenH{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0,0,0,0.65);
				}
				.cenC{
					width: 150rpx;
					height: 72rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					margin: 10rpx 0 35rpx 0;
					.fontSize{
						font-size: 65rpx;
						background: linear-gradient(102deg, #5C4243 0%, #DD6B83 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent
					}
					.isfontSize{
						background: black;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent
					}
			
				}
				.cenF{
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0,0,0,0.45);
				}
			}
			.ismainCenter{
				background: linear-gradient(137deg, #FFF7ED 0%, #F6D7C5 100%);
				// border: 5rpx solid;
				// border-image: linear-gradient(180deg, rgba(204, 123, 138, 1), rgba(146, 76, 83, 1)) 4 4;	
				// clip-path: inset(0 round 6px);
				border-radius: 16rpx;
				width: 206rpx;
				height: 256rpx;
				border: 2px solid #AD626D;
				
			}
			
		}
	}
	.topBox{
		width: 750rpx;
		height: 444rpx;
		background-image: url(@/static/images/mineBg.png);
		// background-image: url(@/static/images/VipBackground.png);
		background-size: cover;
		padding: 120rpx 0 0 0 ;
		box-sizing: border-box;
		.juxing{
			width: 686rpx;
			// height: 232rpx;
			margin: 0 auto;
			// background-image: url(@/static/images/buyVipjuxing.png);
			// background-size: cover;
			padding: 30rpx;
			box-sizing: border-box;
			.desc{
				font-size:24rpx;
				color:#9f9ea1;
			}
			.juxingTitle{
				width: 200rpx;
			}
			.tilte2{
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
				line-height: 32rpx;
			}
			.oneLine,.twoLine{
				display: flex;
				width: 600rpx;
				margin-bottom: 5rpx;
			}
			.line,.line2{
				padding: 10rpx 0;
				box-sizing: border-box;
			}
			.line{
				width: 200rpx;
			}
			.line2{
				width: 100rpx;
			}
			.num{
				font-size: 20rpx;
				font-weight: 400;
				color: #000000;
				line-height: 37rpx;
				margin-left: 20rpx;
			}
		}
		

	}
	
	
</style>
